<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="label">表格名称</text>
				<input class="input" v-model="formData.name" placeholder="请输入表格名称" />
			</view>
			
			<view class="form-item">
				<text class="label">表头字段</text>
				<view class="field-list">
					<view v-for="(field, index) in formData.fields" :key="index" class="field-item">
						<view class="field-inputs">
							<input class="field-input" v-model="field.name" placeholder="字段名称" />
							<input class="field-input" v-model="field.defaultValue" placeholder="默认值（可选）" />
						</view>
						<text class="delete-btn" @click="removeField(index)">×</text>
					</view>
					<button class="add-btn" @click="addField">添加字段</button>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<button class="submit-btn" @click="handleSubmit">创建表格</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				name: '',
				fields: [
					{ name: '', defaultValue: '' }
				]
			}
		}
	},
	methods: {
		addField() {
			this.formData.fields.push({ name: '', defaultValue: '' })
		},
		removeField(index) {
			if (this.formData.fields.length > 1) {
				this.formData.fields.splice(index, 1)
			}
		},
		handleSubmit() {
			if (!this.formData.name.trim()) {
				uni.showToast({
					title: '请输入表格名称',
					icon: 'none'
				})
				return
			}
			
			const emptyFields = this.formData.fields.some(field => !field.name.trim())
			if (emptyFields) {
				uni.showToast({
					title: '请填写所有字段名称',
					icon: 'none'
				})
				return
			}
			
			// 创建Excel表记录
			const excelList = uni.getStorageSync('excelList') || []
			const newExcel = {
				id: Date.now().toString(),
				name: this.formData.name,
				fields: this.formData.fields.map(f => ({
					name: f.name,
					defaultValue: f.defaultValue || ''
				})),
				createTime: new Date().toLocaleString(),
				data: []
			}
			
			excelList.push(newExcel)
			uni.setStorageSync('excelList', excelList)
			
			uni.showToast({
				title: '创建成功',
				icon: 'success',
				success: () => {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			})
		}
	}
}
</script>

<style>
.container {
	padding: 20px;
	min-height: 100vh;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
}

.form {
	flex: 1;
}

.form-item {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 20px;
}

.label {
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
	display: block;
}

.input {
	width: 100%;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
}

.field-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.field-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.field-inputs {
	flex: 1;
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.field-input {
	flex: 1;
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
}

.delete-btn {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #FF3B30;
	font-size: 20px;
}

.add-btn {
	margin-top: 10px;
	background-color: #f5f5f5;
	color: #007AFF;
	border: 1px dashed #ddd;
}

.footer {
	padding: 20px 0;
}

.submit-btn {
	background-color: #007AFF;
	color: #fff;
	border-radius: 8px;
	font-size: 16px;
}
</style> 